<template>
    <div>
        <div class="blockcenter">
            <div class="demonstration">
                <span>您对商家/菜品满意吗？</span>
            </div>

            <!-- <textarea class="eltext" rows="5" cols="30">评论不超过50字</textarea> -->
            <el-rate
                    v-model="value2"
                    :colors="colors">
            </el-rate>
            <div class="button">
                <el-button type="success" @click="evaluating" v-loading="loading" plain>提交评价</el-button>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "evaluate",
        data() {
            return {
                orderId: this.$route.query.orderId,
                value2: null,
                loading: false,
                colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
            }
        },
        methods: {
            async evaluating() {
                this.loading = true
                let url = "/order/comment"
                let data = {level: this.value2, orderId: this.orderId}
                const res = await this.$ajax_(url, data, 'put')
                this.$alert_res(res)
                this.loading = false
                if (res === null) {
                    return;
                }
                this.$router.push({path: '/orderList'});
            }
        }
    }
</script>

<style scoped>
    .blockcenter {
        height: 100%;
        margin: 2%;
        padding: 2%;
        text-align: center;
        font-size: 1.4rem;
    }

    .blockcenter .demonstration {
        margin: 6vw;
    }

    .blockcenter .button {
        margin: 2vw;
    }

</style>